<div>
    <form clrForm #settingForm="ngForm">
        <div style="display: inline-flex;">
            <clr-input-container>
                <label>{{'APP_SYSTEM_NAME'|translate}}</label>
                <input clrInput name="system_name" size=45 [(ngModel)]="item.systemName" required/>
                <clr-control-helper></clr-control-helper>
            </clr-input-container>
        </div>
        <br>
        <div style="display: inline-flex;">
            <clr-input-container >
                <label>Logo</label>
                <input clrInput name="name" size=45 placeholder="{{this.file?.name || 'APP_FILE_SELECTED_NOTHING' | translate}}" disabled/>
            </clr-input-container>
            <div style="margin-top: 1.2rem;">
                <label style="margin-left: 15px;" for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{"APP_FILE_SELECT"|translate}}</label>
                <input style="display: none;" class="file-input" type="file" id="chart" name="chart" ngModel (change)="onLogoChange($event)">
            </div>
            <clr-control-helper></clr-control-helper>
        </div>
    </form>

    <button  [disabled]="settingForm.invalid || file == null" class="btn btn-info-outline" (click)="onSubmit()">{{'APP_COMMIT'|translate}}</button>
</div>
